<!-- 申请分销商  -->
<template>
  <s-layout :title="$t('pages.user.store.title')" class="apply-wrap" navbar="normal" >
    <!-- <s-empty
      v-if="state.code === 0"
      paddingTop="0"
      icon="/static/comment-empty.png"
      text="未开启申请店铺"
    ></s-empty -->>

    <view class="distribution-apply-wrap">
      <view class="apply-header">
        <view class="header-box ss-flex">
          <image
            class="bg-img"
            :src="sheep.$url.cdn(state.background)"
            mode="widthFix"
            @load="onImgLoad"
          ></image>
          <view class="heaer-title">{{$t('pages.user.store.title')}}</view>
        </view>
      </view>
      <view class="apply-box bg-white" :style="{ marginTop: state.imgHeight + 'rpx' }">
        <uni-forms
          label-width="200"
          :model="state.model"
          :rules="state.rules"
          border
          class="form-box"
        >
          <view class="item-box">
            <uni-forms-item
              :label="$t('pages.user.store.storeName')"
              :required="true"
              label-position="left"
            >
              <uni-easyinput
                :inputBorder="false"
                type="text"
                :styles="{ disableColor: '#fff' }"
                placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
                v-model="state.formData.shop_name"
                :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.storeName')"
              />
            </uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.code')"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.invite_code"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.code')"
			  />
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.logo')"
			  label-position="top"
			>
			  <s-uploader
			    v-model:url="state.formData.logo"
			    fileMediatype="image"
			    limit="1"
			    mode="grid"
			    :imageStyles="{ width: '168rpx', height: '168rpx' }"
			  ></s-uploader>
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.mobile')"
			  :required="true"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.mobile"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.mobile')"
			  />
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.business')"
			  :required="true"
			  label-position="top"
			>
			  <s-uploader
			    v-model:url="state.formData.licence_image"
			    fileMediatype="image"
			    limit="1"
			    mode="grid"
			    :imageStyles="{ width: '168rpx', height: '168rpx' }"
			  ></s-uploader>
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.country')"
			  :required="true"
			  label-position="left"
			   @tap="state.showNation = true"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.nation"
			    :placeholder="$t('pages.user.store.pleaseSelect') + $t('pages.user.store.country')"
			  >
				<template v-slot:right>
				  <uni-icons type="right"></uni-icons>
				</template>
			  </uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.province')"
			  :required="true"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.province_name"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.province')"
			  />
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.city')"
			  :required="true"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.city_name"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.city')"
			  />
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.area')"
			  :required="true"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="text"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.district_name"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.area')"
			  />
			</uni-forms-item>
			
			<uni-forms-item
			  :label="$t('pages.user.store.introduction')"
			  label-position="left"
			>
			  <uni-easyinput
			    :inputBorder="false"
			    type="textarea"
			    :styles="{ disableColor: '#fff' }"
			    placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
			    v-model="state.formData.intro"
			    :placeholder="$t('pages.user.store.pleaseIn') + $t('pages.user.store.introduction')"
			  />
			</uni-forms-item>
			
			
          </view>
        </uni-forms>
        <label class="ss-flex ss-m-t-20" v-if="state.protocol?.status == 1" @tap="onChange">
          <radio
            :checked="state.isAgree"
            color="var(--ui-BG-Main)"
            style="transform: scale(0.6)"
            @tap.stop="onChange"
          />
          <view class="agreement-text ss-flex">
            <view class="ss-m-r-4">{{$t('pages.user.store.checkAgreement')}}</view>
            <view
              class="tcp-text"
              @tap.stop="
                sheep.$router.go('/pages/public/richtext', {
                  id: state.protocol.id,
                  title: state.protocol.title,
                })
              "
            >
              《{{ $t('pages.user.store.privacyAgreement') }}》
            </view>
          </view>
        </label>
      </view>
	  
	  <su-fixed bottom placeholder>
	    <view class="submit-box ss-flex ss-row-center ss-p-30">
	      <button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="submit">
	        {{ submitText }}
	      </button>
	    </view>
	  </su-fixed>
    </view>
	
	<su-nation-picker
		:show="state.showNation"
		@cancel="state.showNation = false"
		@confirm="onNationConfirm"
	></su-nation-picker>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import { isEmpty } from 'lodash';
  import { useI18n } from 'vue-i18n'
  
  const { t }  = useI18n()

  const state = reactive({
	  showNation: false,
    code: -1,
    status: '-',
    config: {},
    isAgree: false,
	formData: {},
    formList: [
		{name: t('pages.user.store.storeName'), type: 'text', value: 'shop_name'},
		// {name: '店铺logo', type: 'image', value: 'logo'},
		{name: t('pages.user.store.country'), type: 'text', value: 'nation'},
		{name: t('pages.user.store.province'), type: 'text', value: 'province_name'},
		{name: t('pages.user.store.city'), type: 'text', value: 'city_name'},
		{name: t('pages.user.store.area'), type: 'text', value: 'district_name'},
		{name: t('pages.user.store.business'), type: 'image', value: 'licence_image'},
		{name: t('pages.user.store.mobile'), type: 'text', value: 'mobile'},
	],
    protocol: {},
    applyInfo: [],
    background: '',
    imgHeight: 400,
  });
  
  const onNationConfirm = (e) => {
  	  state.formData = {
  	    ...state.formData,
  	    ...e,
  	  };
  	  state.showNation = false;
  }

  //勾选协议
  function onChange() {
    state.isAgree = !state.isAgree;
  }

  const submitText = computed(() => {
    if (state.status === 'normal') return '修改信息';
    if (state.status === 'needinfo') return '提交审核';
    if (state.status === 'reject') return '重新提交';
    return '';
  });
  
  async function getAgentForm() {
    const { code, data } = await sheep.$api.commission.form();
    state.code = code;
    if (code === 1) {
      state.status = data.status;
      state.background = data.background;
      // state.formList = data.form;
      state.applyInfo = data.applyInfo;
      state.protocol = data.protocol;
  
      if (data.protocol.status != 1) {
        state.isAgree = true;
      }
      mergeFormList();
    }
  }

  function onImgLoad(e) {
    state.imgHeight = (e.detail.height / e.detail.width) * 750;
  }

  async function submit() {
    if (!state.isAgree) {
      sheep.$helper.toast(t('pages.user.store.PleaseCheckAgreement'));
      return;
    }

    const validate = state.formList.every((item) => {
      if (isEmpty(state.formData[item.value])) {
        if (item.type !== 'image') {
          sheep.$helper.toast(`${t('pages.user.store.pleaseIn')}${item.name}`);
        } else {
          sheep.$helper.toast(`${t('pages.user.store.pleaseUpload')}${item.name}`);
        }
        return false;
      }
      return true;
    });

    if (!validate) {
      return;
    }

    const { code } = await sheep.$api.store.apply(state.formData);
    if (code === 1) {
      sheep.$router.back();
    }
  }

  onLoad(() => {
	  getAgentForm()
  });

  // 初始化formData
  function mergeFormList() {
    state.formList.forEach((form) => {
      const apply = state.applyInfo.find(
        (info) => info.type === form.type && info.name === form.name,
      );
      if (typeof apply !== 'undefined') form.value = apply.value;
    });
  }
</script>

<style lang="scss" scoped>
	.submit-box {
		background-color: #ffffff;
	}
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .file-picker__progress {
      height: 0 !important;
    }

    .uni-list-item__content-title {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-disabled {
      color: #333333;
    }
  }

  .distribution-apply-wrap {
    // height: 100vh;
    // width: 100vw;
    // position: absolute;
    // left: 0;
    // top: 0;
    // background-color: #fff;
    // overflow-y: auto;

    .submit-btn {
      width: 690px;
      height: 86rpx;
      border-radius: 43rpx;
    }
    .apply-header {
      position: absolute;
      left: 0;
      top: 0;
    }
    .header-box {
      width: 100%;
      position: relative;
      .bg-img {
        width: 750rpx;
      }

      .heaer-title {
        position: absolute;
        left: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 50rpx;
        font-weight: bold;
        color: #ffffff;
        z-index: 11;

        &::before {
          content: '';
          width: 51rpx;
          height: 8rpx;
          background: #ffffff;
          border-radius: 4rpx;
          position: absolute;
          z-index: 12;
          bottom: -20rpx;
        }
      }
    }

    .apply-box {
      padding: 0 40rpx;

      .item-box {
        border-bottom: 2rpx solid #eee;
      }
    }
  }

  .agreement-text {
    font-size: 24rpx;
    color: #c4c4c4;
    line-height: normal;

    .tcp-text {
      color: var(--ui-BG-Main);
    }
  }

  .card-image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
  }
</style>
